<template>
  <div>
    <van-nav-bar title="我的钱包" left-arrow @click-left="$router.back()" class="bgc" />
    <div class="myMoney">
      <div class="title">我的资产</div>
      <!-- 数据统计 -->
      <div class="data-stats">
        <div class="data-item">
          <div class="text">余额</div>
          <span class="sm"><i class="mn">¥:</i>0.00</span>
        </div>
        <div class="data-item">
          <div class="text">红包</div>
          <span class="sm"><i class="mn">¥:</i>0.00</span>
        </div>
        <div class="data-item">
          <div class="text">银行卡</div>
          <span class="sm">2张</span>
        </div>
      </div>

      <!-- 明细 -->
      <van-grid :column-num="2">
        <van-grid-item text="订单明细" clickable @click="onOrder" />
        <van-grid-item text="佣金明细" clickable @click="onCommission" />
      </van-grid>
    </div>

    <!-- 订单退款 -->
    <div class="operation">
      <div v-if="orderIf">
        <van-cell-group v-for="(k, i) in 2" :key="i">
          <van-cell title="订单退款" value="¥58" />
          <van-cell title="退款时间:" value="2020-02-21 21:29:32" />
        </van-cell-group>
      </div>

      <div v-else-if="commissionIf">
        <van-cell-group v-for="(k, i) in 2" :key="i">
          <van-cell title="邀请开店佣金" value="¥58" />
          <van-cell title="退款时间" value="2020-02-21 21:29:32" />
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'myMoney',
  data() {
    return {
      orderIf: false, // 是否点击订单明细
      commissionIf: false // 是否点击佣金明细
    }
  },
  created() {},
  mounted() {},
  methods: {
    // 点击订单明细
    onOrder() {
      this.orderIf = true
    },
    // 点击佣金明细
    onCommission() {
      this.commissionIf = true
      this.orderIf = false
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .myMoney {
  height: 270px;
  background-color: #ee0a24;
  border: 1px solid rgba(0, 0, 0, 0.1); // 防止塌陷问题
  border-radius: 20px;
  .title {
    font-size: 30px;
    font-weight: 700;
    color: #fff;
    padding: 25px 20px 0 30px;
  }
  .van-grid-item__content {
    background-color: #ee0a24;
    color: #fff;
    padding: 14px 0 10px 0;
  }
  .van-grid-item__text {
    color: #fff;
    font-size: 28px;
  }
  .van-grid-item__content::after {
    border: 0;
  }
  .data-stats {
    height: 130px;
    display: flex;
    .data-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      color: #fff;
      .text {
        font-size: 34px;
        font-weight: 500;
      }
      .mn {
        font-size: 14px;
        font-style: normal;
        margin-right: 3px;
        font-weight: 700;
      }
      .sm {
        padding-top: 6px;
        font-size: 30px;
        font-weight: 700;
      }
    }
  }
}
.operation {
  margin-top: 20px;
  .van-cell {
    margin-bottom: 20px;
    padding: 10px 40px 5px;
  }
}
/deep/.van-nav-bar {
  background: #fff !important;

  .van-ellipsis {
    color: #323233;
  }
  .van-nav-bar__text {
    color: #1989fa;
  }
  .van-nav-bar__arrow {
    color: #1989fa !important;
  }
}
</style>
